<template>
  <div>
    <el-form>
      <div class="id_top_22">
        <p><span>银行存管账户</span></p>
      </div>
      <div class="id_title_one">
        <!-- 1. 开始时true -->
        <div class="id_content">
          <div>
            <!-- 2. 开始时false 然后点击变成true -->
            <div>
              <div class="btn_div_1">
                <el-input
                  class="input_name"
                  v-model="bank_card_code"
                  placeholder="本人银行卡号"
                ></el-input>
              </div>
              <div class="btn_div_2">
                <el-input
                  v-model="bank_card_transaction_pwd"
                  placeholder="设置交易密码"
                  prefix-icon="el-icon-lock"
                  show-password
                ></el-input>
              </div>

              <div class="btn_div_2">
                <el-input
                  v-model="user_pwd_two"
                  placeholder="确认交易密码"
                  prefix-icon="el-icon-lock"
                  show-password
                ></el-input>
              </div>
              <div class="btn_div_2">
                <div class="grid-content bg-purple">
                  <el-form-item prop="phoneCode" class="pr">
                    <el-input
                      v-model="code"
                      placeholder="短信验证码"
                      prefix-icon="el-icon-user"
                      style="width: 52%"
                      clearable
                    ></el-input
                    >&nbsp;&nbsp;&nbsp;
                    <button
                      @click.prevent="getShortMessageCode()"
                      :class="{ code_btn44: ppt, code_btn144: !ppt }"
                      :disabled="!show"
                    >
                      <span v-show="show">获取验证码</span>
                      <span v-show="!show">{{ count }} 秒后可重发</span>
                    </button>
                  </el-form-item>
                </div>
              </div>
              <div class="btn_div_3">
                <el-button
                  class="nextBtn"
                  type="danger"
                  style="margin-top: 12px"
                  @click="next_two"
                  >下一步</el-button
                >
              </div>

              <div class="btn_div_3">
                <el-checkbox v-model="checked">
                  我已阅读并同意 &nbsp;&nbsp;&nbsp;<a href="">
                    《用户隐私政策》
                  </a></el-checkbox
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      checked: false,
      show: true,
      timer: 0,
      count: 0,
      ppt: true, //点击时改变样式
      active: 0,
      id_title: true,
      id_title_two: true,
      id_title_three: false,

      // 身份证
      user_identity: "",
      // 银行卡号
      bank_card_code: "",
      // 用户密码
      bank_card_transaction_pwd: "",
      // 用户确认密码
      user_pwd_two: "",
      // 用户手机号
      user_phone: "",
      // 短信验证码
      verification_code: "",
      code: "",
      // 接后台实体
      userBean: {},
    };
  },

  // 初始化加载用户信息
  created() {
    this.initialize();
  },

  methods: {
    // 回显加载用户信息
    initialize() {
      axios({
        url: "/api/user/findUserByPhone",
      }).then((res) => {
        console.log(res.data.data);
        console.log("----------------------------");
        this.userBean = res.data.data;
        console.log(this.userBean);
      });
    },

    // 点击
    next_two() {
      if (this.checked == false) {
        this.$message({
          showClose: true,
          message: "请同意用户隐私政策",
          type: "error",
        });
      } else {
        // 判断银行卡号
        if (
          this.bank_card_code == "" ||
          this.bank_card_code == null ||
          this.bank_card_code.length < 15
        ) {
          this.$message({
            showClose: true,
            message: "请输入正确银行卡号码",
            type: "error",
          });
        } else {
          // 判断密码
          if (
            this.bank_card_transaction_pwd == "" ||
            this.bank_card_transaction_pwd == null ||
            this.bank_card_transaction_pwd.length < 5
          ) {
            this.$message({
              showClose: true,
              message: "请输入汉字，数字，字母至少6位",
              type: "error",
            });
          } else {
            // 确认密码
            if (this.user_pwd_two == this.bank_card_transaction_pwd) {
              if (this.code == null || this.code == "") {
                this.$message({
                  showClose: true,
                  message: "请输入验证码",
                  type: "error",
                });
              } else {
                if (
                  this.code != null &&
                  this.code != "" &&
                  this.code.length != 0
                ) {
                  axios({
                    url: "api/user/insertBankCard",
                    method: "get",
                    params: {
                      bank_card_code: this.bank_card_code,
                      bank_card_transaction_pwd: this.bank_card_transaction_pwd,
                      code: this.code,
                    },
                  }).then((res) => {
                    // alert("成功");
                    this.$router.push({ path: "SecuritySetting7" });
                  });
                } else {
                  this.$message({
                    type: "warning",
                    message: "请输入验证码",
                  });
                  return;
                }
              }
            } else {
              this.$message({
                showClose: true,
                message: "请与上边输入的密码保持一致",
                type: "error",
              });
            }
          }
        }
      }
    },

    // 获取短信验证码
    getShortMessageCode() {
      this.ppt = !this.ppt;
      axios({
        url: "/api/user/smsverification",
      }).then((res) => {
        console.log(res);
        // this.form=res.data.data;
      });
      console.log(1111111111111);
      console.log(!this.timer);
      // 验证码倒计时
      if (!this.timer) {
        console.log(this.timer);
        this.count = 60;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            this.ppt = !this.ppt;
          }
        }, 1000);
      }
    },
  },
};
</script>

<style>
.input_name {
  float: left;
  margin-left: 70px;
}
.btn_div_1 {
  margin-top: 43px;
  margin-left: 17px;
  width: 60%;
  float: left;
  /* background-color: #dcdfe6; */
}
.btn_div_2 {
  float: left;
  margin-top: 25px;
  margin-left: 86px;
  width: 60%;
  /* background-color: #dcdfe6; */
}
.btn_div_3 {
  float: left;
  margin-top: 15px;
  margin-left: 86px;
  width: 60%;
  /* background-color: #dcdfe6; */
}

.nextBtn {
  width: 100%;
}
.id_content {
  margin-top: 50px;
  width: 100%;
  height: 800px;
  /* margin: 0 auto; */
  float: left;
  /* background-color: aquamarine; */
}
.id_title_one {
  margin-top: 20px;
  width: 50%;
  height: 900px;
  margin: 0 auto;
  /* background-color: aqua; */
}
.id_top_22 {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-style: normal;
  font-weight: 700;
  margin-left: 30px;
  width: 93%;
  height: auto;
  border-bottom: 2.3px solid #efefef;
  line-height: 4;
  font-size: 18px;
}

.code_btn44 {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid red;
  background-color: red;
  -webkit-border-radius: 5px;
}
.code_btn144 {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid #cccccc;
  background-color: #cccccc;
  -webkit-border-radius: 5px;
}
</style>